import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import AutoImport from 'unplugin-auto-import/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    DefineOptions(),
    svgLoader({ defaultImport: 'url', svgoConfig: { datauri: 'base64', full: true } }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'k-[dir]-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__'
    }),
    AutoImport({
      dts: 'src/types/auto-imports.d.ts',
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      dirs: [resolve(process.cwd(), 'src/store')],
      imports: [
        'vue',
        'vue-router',
        'pinia',
        { '@vueuse/core': ['useDark', 'useToggle', 'useClipboard', 'useResizeObserver', 'useDebounceFn', 'useTimestamp', 'useRafFn'] }
      ],
      resolvers: [ArcoResolver()],
      eslintrc: {
        enabled: false, // Default `false`
        filepath: 'src/types/.auto-imports.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      }
    })
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, '../src')
      },
      {
        find: 'vue',
        replacement: 'vue/dist/vue.esm-bundler.js' // compile template
      }
    ],
    extensions: ['.ts', '.js']
  },
  define: {
    'process.env': {}
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'hack': `true; @import (reference) "${resolve('src/assets/style/breakpoint.less')}";`,
          '@color-bg-1': '#f85959'
        },
        javascriptEnabled: true
      }
    }
  }
})
